<template>
  <div class="confirmation" v-if="!getIsPhone">
    <div class="info">
      <p class="font-size">共<span>{{totalQuantity}}</span>注</p>
      <p>共<span>{{totalAmount}}</span>元</p>
    </div>
    <div class="buttons">
      <div 
        class="btn button-disabled clear hover-style" 
        :class="getCurrentCart.length > 0 ? 'button-unselected' : ''"
        @click="clearCart"
      >清空</div>
      <div 
        class="btn button-disabled add hover-style"
        :class="getCurrentCart.length > 0 ? 'button-unselected' : ''"
        @click="addNumber"
      >追号</div>
    </div>
    <div 
      class="confirm button-disabled hover-style" 
      :class="getCurrentCart.length > 0 ? 'button-selected' : ''"
      @click="submitOrder"
    >确认投注</div>
    <order-confirmation-confirm 
      :totalAmount="totalAmount"
      :totalQuantity="totalQuantity"
      :showConfirmationTips="showConfirmationTips"
      @clear="clearCartAfterBuying"
      @click="updateState"
    ></order-confirmation-confirm>
  </div>
  <div class="order-confirmation" v-else>
    <div class="order-records">
      <header-template-phone>
        <template v-slot:left>
          <header-back></header-back>
        </template>
        <template v-slot:center>
          <div class="center-context" @click="submitOrder">
            确认投注
          </div>
        </template>
      </header-template-phone>
      <div class="current-lottery-info">
        <bill-board>
          <current-lottery-info-phone>
            <template v-slot:top>
              <div class="date-no">
                {{getLotteryType.lotteryName}}<span class="number">{{getLotteryDateNo}}</span>期开奖
              </div>
              <div class="countdown-wrapper">
                <count-down-normal :color="'#fff'"></count-down-normal>
              </div>
            </template>
            <template v-slot:bottom>
              <div class="bottom-content">
                <span class="quantity bottom-item">注数:
                  <span>{{totalQuantity}}</span>
                </span>
                <span class="amount bottom-item">金额:
                  <span>{{totalAmount}}</span>
                </span>
              </div>
            </template>
            <template v-slot:right-top>
              <div>
                可用余额
              </div>
            </template>
            <template v-slot:right-bottom>
              <div style="background: none; color: #e02828;">
                888888.00
              </div>
            </template>
          </current-lottery-info-phone>
        </bill-board>
      </div>
      <div class="order-inner">
        <div class='order-content'>
          <bill-board ref="billboard" v-show="currentOrder && currentOrder.length > 0">
            <div
              ref="orderitem"
              class="order-item border-bottom"
              v-for="(item, index) in currentOrder" :key="item.orderId" v-show="currentOrder && currentOrder.length > 0"> 
              <div class="item">
                <span class="item-title">彩种玩法:</span><span>{{item.mainPlayMode}}</span>
              </div>
              <div class="item">
                <span class="item-title">购买金额:</span>
                <span class="item-amount">{{item.totalAmount}}</span>
                <span class="item-bonus">(中奖可盈:<span>{{item.bonous}}</span>)</span>
              </div>
              <div class="item">
                <span class="item-title">彩票返点:</span><span>{{item.refundRate}}</span>
              </div>
              <div class="item">
                <span class="item-title">购买金额:</span><span><span class="at">@</span>{{item.detailNumberInfo ? item.detailNumberInfo : numberStr}}</span>
              </div>
              <div class="delete-btn button-selected">
                <span class="icon" @click="handleDeleteOrder(index)">
                  <i class="iconfont iconty_guanbi"></i>
                </span>
              </div>
            </div>
          </bill-board>
        </div>
      </div>
      <footer-template-phone>
        <template v-slot:left>
          <div class="tab clear" @click="clearCart" 
            :class="getCurrentCart.length > 0 ? '' : 'disabled'">
            <span class="icon red">
              <i class="iconfont iconacbar_qingkong"></i>
            </span>
            <span class="text">清空</span>
          </div>
          <div class="divide-line"></div>
          <div class="tab continue" 
            :class="getCurrentCart.length > 0 ? '' : 'disabled'"
            @click="continueToSelect">
            <span class="icon">
              <i class="iconfont iconacbar_jixuuxanhao"></i>
            </span>
            <span class="text">继续选号</span>
          </div>
          <div class="divide-line"></div>
          <div 
            class="tab add-more"
            :class="getCurrentCart.length > 0 ? '' : 'disabled'"
            >
            <span class="icon">
              <i class="iconfont iconacbar_zhuihao"></i>
            </span>
            <span class="text">追号</span>
          </div>
        </template>
        <template v-slot:right>
          <div 
            @click="submitOrder" 
            class="confirm"
            :class="getCurrentCart.length > 0 ? '' : 'disabled'">
            确认订单
          </div>
        </template>
      </footer-template-phone>
    </div>
    <order-confirmation-confirm 
      :totalAmount="totalAmount"
      :totalQuantity="totalQuantity"
      :showConfirmationTips="showConfirmationTips"
      @clear="clearCartAfterBuying"
      @click="updateState"
    ></order-confirmation-confirm>
  </div>
</template>

<script>

import HeaderBack from '@/components/base/header-back/header-back'
import RecordsSelector from '@/components/records-selector/records-selector'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import FooterTemplatePhone from '@/components/base/phone/footer-template-phone/footer-template-phone'
import CurrentLotteryInfoPhone from '@/components/base/phone/current-lottery-info-phone/current-lottery-info-phone'
import BillBoard from '@/components/base/bill-board/bill-board'
import CountDownNormal from '@/components/base/count-down/count-down-normal'
import OrderSpecification from '@/components/base/order-specification/order-specification'
import OrderSuccess from '@/components/base/phone/order-success/order-success'
import OrderOperateTemplate from '@/components/base/phone/order-operate-template/order-operate-template'
import BcModal from '@/components/base/bc-modal/bc-modal'
import OrderConfirmationConfirm from './components/order-confirmation-confirm' 

import { mapGetters, mapMutations } from 'vuex';


export default {
  components: {
    HeaderTemplatePhone,
    FooterTemplatePhone,
    BillBoard,
    OrderSpecification,
    RecordsSelector,
    CurrentLotteryInfoPhone,
    CountDownNormal,
    OrderSuccess,
    HeaderBack,
    OrderOperateTemplate,
    BcModal,
    OrderConfirmationConfirm
  },
  props: {
    showOrderConfirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showConfirmationTips: false,
      currentOrder: []
    }
  },
  created() {
    this.currentOrder = this.getCurrentCart
  },
  methods:{
    hideOrderConfirmation() {
      this.$emit('click')
    },
    submitOrder() {
      if(this.getCurrentCart.length > 0) {
        this.showConfirmationTips = true
      }
    },
    handleDeleteOrder(index) {
      this.deleteOrder(index)
    },
    updateState(flag) {
      this.showConfirmationTips = flag

    },
    continueToSelect() {
      if (this.getCurrentCart.length > 0) {
        this.$router.go(-1)
      }
    },
    // 追号
    addNumber() {
      if (this.getCurrentCart.length > 0) {
        //
      }
    },
     // 清空购物车
    clearCart() {
      if (this.getCurrentCart.length > 0) {
        this.clear()
      }
    },
    clearCartAfterBuying() {
      this.clear()
    },
    getSum(key) {
      let ret = 0
      this.getCurrentCart.forEach(order => {
        ret += order[key]
      })
      return ret
    },
    ...mapMutations('lottery', {
      deleteOrder: 'SET_DELETE_ORDER',
      clear: 'CLEAR_CART'
    })
  },
  computed: {
    // 选购彩票的总金额
    totalAmount() {
      return this.getSum('totalAmount')
    },
    // 选购彩票的数量
    totalQuantity() {
     return this.getSum('buyingQuantity')
    },
    ...mapGetters('lottery', ['getCurrentCart', 'getLotteryDateNo', 'getLotteryType', 'getIsPhone'])
  },
  watch: {
    'getCurrentCart'(newVal) {
      this.currentOrder = newVal
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@import '~@/assets/styles/mixins.styl'
@media screen and (min-width 750px)
  .confirmation
    float right
    margin-left 20px
    margin-top 20px
    .info
    p
      span 
        font-size 20px
        line-height 1.2
        color: $color-theme-red
    .buttons
      margin-top 10px
      line-height 25px
      display flex 
      .btn 
        width 80px
        height 36px
        line-height 36px 
        font-size 15px
        font-family ArialMT
        text-align center 
        font-weight 700
        &.clear
          margin-right 12px
    .confirm
      font-size 15px
      width 175px
      height 36px
      line-height 36px 
      margin-top 10px
      font-family ArialMT
      font-weight 700
      text-align center 
@media screen and (max-width 750px)
  .order-confirmation 
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    height 100% 
    width 100% 
    background-color #fff
    z-index 1000
    &.slide-enter, &.slide-leave-to 
      transform translate3d(100%, 0, 0)
    &.slide-enter-active, &.slide-leave-active 
      transition all 0.3s
    .order-records 
      position absolute 
      overflow scroll
      top 0 
      right 0
      left 0
      bottom 0
      &:-webkit-scrollbar
        display: none
      .center-context 
        font-size 15px
        color #fff6d6
      .current-lottery-info  
        width 100% 
        box-sizing border-box
        position fixed 
        top 48px  
        height 67px
        z-index 1000
        .bottom-content 
          .bottom-item 
            span  
              color $color-theme-red
        .countdown-wrapper >>> .count-down 
          background #000 
          color #fff
          padding 2px 5px 
          border-radius 3px
          margin-left 10px
      .current-lottery-info >>> .bg-bar 
        display none
      .order-inner
        box-sizing border-box 
        padding-top 115px
        padding-bottom 50px
        .order-content 
          box-sizing border-box 
          padding 10px
          top 120px 
          right 0
          left 0
        .order-content >>> .bill-board 
          .order-item 
            box-sizing border-box 
            padding 10px 
            background #fcfbf9
            .item 
              line-height 30px
              display flex 
              .item-title 
                margin-right 10px
                color $color-sub-grey
              .item-amount 
                color $color-primary-green 
              .item-bonus 
                margin-left 10px
                color $color-theme-red
              .at 
                color $color-theme-red
            .delete-btn 
              width 21px 
              height 21px 
              display flex 
              align-items center
              justify-content center
              border-radius 50% !important
              position absolute 
              top 10px 
              right 10px
              .iconfont 
                font-size 14px
    .tab 
      display flex 
      flex-direction column
      align-items center
      extend-click()
      width 33.33%
      &.disabled 
        .icon 
          background $color-text-button !important 
          border 1px solid $color-divide-line 
          .iconfont 
            color #cccdd0
        .text 
          color #cccdd0
      .icon 
        width 21px
        height 21px 
        border-radius 50% 
        background $color-theme-dark
        display flex 
        align-items center  
        justify-content center
        margin-bottom 5px
        &.red  
          background $color-theme-red 
        .iconfont 
          font-size 22px
          color #fff
    .confirm 
      &.disabled 
        background $color-text-button !important 
        border-left 1px solid $color-divide-line 
        color #cccdd0
    .divide-line 
      width 1px 
      height 24px 
      background $color-divide-line
    .order-operate
      min-height 215px
      width 100px
      background-color #fff
      position absolute
      width 320px
      top 50%
      left 50%
      transform translate(-50%, -50%)
      border-radius 6px
      .title 
        display flex 
        font-size 100
        align-items center
        height 48px 
        background-color $color-theme-dark
        box-sizing border-box 
        padding 0 10px
        justify-content space-between
        border-top-left-radius 6px 
        border-top-right-radius 6px
        .left 
          .icon 
            width 20px
            height 20px 
            display flex 
            extend-click()
            .iconfont 
              color #fff 
              font-size 20px
        .center 
          color #fff
        .right 
          .icon
            width 20px
            height 20px
            color $color-theme-red
            display flex 
            align-items center
            extend-click()
            .iconfont 
              font-size 22px
      .content
        box-sizing border-box 
        padding 0 10px 
        text-align center
        .tips 
          margin-top 35px 
        .order-info  
          margin-top 14px 
          margin-bottom 40px
          .info-item 
            .red 
              color $color-theme-red 
              font-size 20px
              margin 0 3px
        .btns 
          font-size 0
          .btn 
            width 99px
            height 36px 
            font-size 14px 
            margin-right 10px 

</style>